import React from 'React'

import {
    StyleSheet,
    View,
    Text,
    Button,
    Image,
    AppRegistry
} from 'react-native';


import {
    StackNavigator,
    TabNavigator,
    NavigationActions
} from 'react-navigation';


import DetailPage
    from './DetailPage';

export default class HomePage extends React.Component {


    static navigationOptions = {


        tabBarLabel: '首页',

        headerTitleStyle: {
            alignSelf: 'center'
        }

    };

    componentDidMount() {


    }


    render() {


        // const { navigate } = this.props.navigation;

        return (

            <View style={styles.container}>
                <Text>
                    首页
                </Text>

                <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                    <Button
                        title="页面跳转"
                        onPress={() =>
                            this.props.navigation.navigate({
                                routeName: 'DetailPage'
                            })
                        }


                    />
                    <Button
                        title="列表使用"
                        onPress={() =>
                            this.props.navigation.navigate({
                                routeName: 'ListDemo'
                            })
                        }
                    />

                    <Button
                        title="网络请求"
                        onPress={() =>
                            this.props.navigation.navigate({
                                routeName: 'NetDemo'
                            })
                        }
                    />
                </View>
                <View style={{width: 200, height: 400}}>
                    <View style={{flex: 1, backgroundColor: 'powderblue'}}/>
                    <View style={{flex: 1, backgroundColor: 'skyblue'}}/>
                    <View style={{flex: 1, backgroundColor: 'steelblue'}}/>
                </View>


            </View>

        )


    }


}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    icon: {
        width: 20,
        height: 20
    }
});













